<template>
  <div>
    <!-- 展示 -->
    <ul>
      <li
        style="border: 3px solid red; margin: 10px 5px"
        v-for="({ title, conten }, index) in liuYanBanList"
        :key="index"
      >
        <h3>{{ title }}</h3>
        <p>
          {{ conten }}
        </p>
      </li>
    </ul>
    <!-- 操作 -->
    <div><input type="text" v-model="title" /></div>
    <div>
      <textarea v-model="conten"></textarea>
    </div>
    <div>
      <button @click="submit">提交</button>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      title: "",
      conten: "",
    };
  },
  computed: {
    ...mapState(["liuYanBanList"]),
  },
  methods: {
    ...mapActions(["liuYanBan"]),
    submit() {
      const title = this.title;
      const conten = this.conten;
      if (
        title.length <= 20 &&
        title.trim().length &&
        conten.length <= 100 &&
        conten.trim().length
      ) {
        //   调用action
        this.liuYanBan({ title, conten }).then((data) => {
          console.log(data, "组件");
        });
      } else {
        alert("内容不符合规范");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>